<template>
    <div class="c-cell" v-infinite-scroll="loadData"
         infinite-scroll-disabled="loading"
         infinite-scroll-distance="10">
        <div v-if="title==='绑定户号'||title==='切换户号'||title==='户号绑定'">
            <mt-cell v-for="(item,index) in data" :key="item.id">
                <icon slot="icon"
                      :clazz="clickIndex==item.id?'icon-qiabao-copy':'icon-qukaliang'"></icon>
                <div v-if="title==='户号绑定'">
                    <p>{{item.name}}</p>
                    <p style="font-size: 14px;color: rgba(0,0,0,.6);line-height: 18px;padding-bottom: 10px">
                        {{item.meta}}</p>
                </div>
                <div v-else>
                    <p>客户名称：<span v-if="item.name">{{item.name}}</span><span v-else>--</span>
                        <span class="customer-type" v-if="item.chargeWayTxt">{{item.chargeWayTxt}}</span>
                    </p>
                    <p>客户编号：<span v-if="item.householdNo">{{item.householdNo}}</span><span v-else>--</span></p>
                    <p style="padding-bottom: 10px">
                        用水地址：<span v-if="item.address">{{item.address}}</span><span v-else>--</span>
                    </p>
                </div>
                <div>
                    <mt-button plain v-if="title==='绑定户号'&&clickIndex!=item.id" @click="handleClose(item,index)">
                        <icon clazz="icon-shanchu" style="width: 20px;height: 20px;"></icon>
                    </mt-button>
                    <mt-button plain v-if="title==='切换户号'" @click="handleSwitch(item,index)">
                        <span :class="clickIndex==item.id?'mint-radio-core-blue':'mint-radio-core'"></span>
                    </mt-button>
                    <mt-button plain v-if="title==='户号绑定'" @click="handleBinding(item,index)">
                        <span :class="clickIndex==item.id?'mint-radio-core-blue':'mint-radio-core'"></span>
                    </mt-button>
                </div>
            </mt-cell>
        </div>
        <mt-cell v-else>
            <icon slot="icon" clazz="icon-qukaliang"></icon>
            <div>
                <p>
                    客户名称：
                    <span v-if="user.name">{{user.name}}<span v-if="user.chargeWayTxt" class="customer-type">{{user.chargeWayTxt}}</span>
                    </span>
                    <span v-else>--</span>
                </p>
                <p>客户编号：<span v-if="user.householdNo">{{user.householdNo}}</span><span v-else>--</span></p>
                <p style="padding-bottom: 10px">用水地址：<span v-if="user.address">{{user.address}}</span>
                    <span v-else>--</span></p>
            </div>
        </mt-cell>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                clickIndex: 0,
                loading: false,
                pageSize: 10,
                pageNum: 1,
                user: {
                    name: app.util.localStorage('user.name'),
                    address: app.util.localStorage('user.address'),
                    householdNo: app.util.localStorage('user.householdNo'),
                    chargeWayTxt: app.util.localStorage('user.chargeWayTxt')
                }
            }
        },
        props: {
            data: {
                type: Array,
                default() {
                    return []
                }
            },
            title: {
                type: String,
                default: ''
            },
            householdNo: {
                type: String,
                require: true
            }
        },
        methods: {
            handleClose(item, index) {
                this.$emit('close', item, index)
            },
            handleSwitch(item, index) {
                this.clickIndex = item.id;
                app.ajax.post(app.config.api.terminal.switch, {
                    terminalId: item.id
                }, (res) => {
                    app.util.localStorage('user.householdNo', res.data.householdNo);
                    app.util.localStorage('user.address', res.data.address);
                    app.util.localStorage('user.name', res.data.name);
                    app.util.localStorage('user.chargeWayTxt', res.data.chargeWayTxt);
                    app.util.localStorage('terminalId', item.id);
                    let ladderVolume = res.data.ladderVolume.split(',');
                    app.util.localStorage('user.ladderVolumeFirst', ladderVolume[0]);
                    app.util.localStorage('user.ladderVolumeSecond', ladderVolume[1]);
                    app.util.localStorage('user.ladderVolumeThree', ladderVolume[2]);
                    // 2秒后跳转
                    setTimeout(() => {
                        this.$router.push({
                            name: 'index', params: {id: this.$route.params.id ? '首页' : '用量'}
                        })
                    }, 2000)
                })
            },
            handleBinding(item, index) {
                this.clickIndex = item.id;
                this.$emit('binding', item);
            },
            loadData() {
                this.pageNum += 1;
                app.ajax.get(app.config.api.account.select, {
                    householdNo: this.householdNo,
                    pageSize: this.pageSize,
                    pageNum: this.pageNum
                }, (res) => {
                    if (res.data.length > 0) {
                        this.$nextTick(() => {
                            this.data.push(...res.data);
                        })
                        this.loading = false;
                    } else {
                        this.loading = true;
                    }
                })
            }
        },
        mounted() {
            setTimeout(() => {
                this.clickIndex = app.util.localStorage('terminalId');
            }, 500)
        }
    }
</script>
<style>
    .c-cell .mint-cell-value {
        width: 90%;
        text-align: left;
    }

    .c-cell p {
        white-space: nowrap;
        margin: 0 10px;
        padding-top: 10px;
    }

    .c-cell .mint-radio-core-blue {
        box-sizing: border-box;
        display: inline-block;
        background-image: url("../img/check.png");
        position: relative;
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

    .c-cell .mint-button {
        position: absolute;
        right: 0;
        top: 15%;
    }
</style>
